<template>
    <div>
      <el-card :bordered="false" shadow="never" class="ivu-mb-16" :body-style="{ padding: 0 }">
        <div class="padding-add">
          <el-form ref="params" :model="params" @submit.native.prevent inline>
            <el-form-item label="服务类型名称：" prop="status2" label-for="status2">
              <el-input clearable v-model="params.name" placeholder="请输入服务类型名称" class="form_content_width" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" v-db-click @click="getData">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" v-db-click @click="menusAdd('添加服务类型')">添加服务类型</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <el-card :bordered="false" shadow="never" class="ivu-mt">
        <vxe-table
          :border="false"
          class="vxeTable"
          highlight-hover-row
          highlight-current-row
          :loading="loading"
          ref="xTable"
          header-row-class-name="false"
          :data="tableData"
          row-id="id"
        >
          <vxe-table-column field="id" title="ID" min-width="100"></vxe-table-column>
          <vxe-table-column field="parent_name" title="服务分类" min-width="100"></vxe-table-column>
          <vxe-table-column field="name" title="服务类型名称" min-width="100"></vxe-table-column>
          <vxe-table-column field="create_time" title="创建时间" min-width="100"></vxe-table-column>
          <vxe-table-column field="update_time" title="更新时间" min-width="100"></vxe-table-column>
          <vxe-table-column field="date" title="操作" align="center" width="150" fixed="right">
            <template slot-scope="scope">
              <a v-db-click @click="edit(scope.row, '编辑')">编辑</a>
              <br />
              <a v-db-click @click="del(scope.row, '删除', scope.$index)">删除</a>
            </template>
          </vxe-table-column>
        </vxe-table>
  
        <div class="acea-row row-right page">
          <pagination
            v-if="total"
            :total="total"
            :page.sync="params.page"
            :limit.sync="params.limit"
            @pagination="pageChange"
          />
        </div>
      </el-card>
      <category
        ref="category"
        :formValidate="formValidate"
        :titleFrom="titleFrom"
        @changeMenu="changeMenu"
        @clearFrom="clearFrom"
      ></category>
    </div>
  </template>
  
  <script>
  import { getServiceTypeList, getServiceTypeDetail } from '@/api/classification';
  import formCreate from '@form-create/element-ui';
  import category from './components/category';
  
  export default {
    name: 'serviceType',
    data() {
      return {
        total: 0,
        params: {
          name: '',
          page: 1,
          limit: 15,
        },
        loading: false,
        tableData: [],
        formValidate: {},
        titleFrom: '',
      };
    },
    components: { category, formCreate: formCreate.$form() },
    computed: {},
    mounted() {
      this.getData();
    },
    methods: {
      // 列表
      getData() {
        this.loading = true;
        getServiceTypeList(this.params)
          .then(async (res) => {
            this.tableData = res.data.list;
            this.total = res.data.count;
            this.loading = false;
          })
          .catch((res) => {
            this.loading = false;
            this.$message.error(res.msg);
          });
      },
      pageChange() {
        this.getData();
      },
      // 删除
      del(row, tit, num) {
        let delfromData = {
          title: tit,
          num: num,
          url: `classification/serviceType/${row.id}`,
          method: 'DELETE',
          ids: '',
          un: 1,
        };
        this.$modalSure(delfromData)
          .then((res) => {
            this.$message.success(res.msg);
            this.page = 1;
            this.getData();
          })
          .catch((res) => {
            this.$message.error(res.msg);
          });
      },
      // 编辑
      edit(row, title, index) {
        this.formValidate = {};
        this.getDetails(row.id);
        this.titleFrom = title;
        this.$refs.category.valids = false;
      },
      // 添加
      menusAdd(title) {
        this.formValidate = {};
        this.$refs.category.modals = true;
        this.$refs.category.valids = false;
        this.titleFrom = title;
        this.formValidate.auth_type = 1;
        this.formValidate.is_show = 0;
        this.formValidate.is_show_path = 0;
      },
      // 详情
      getDetails(id) {
        getServiceTypeDetail(id)
          .then(async (res) => {
            this.formValidate = res.data;
            this.$refs.category.modals = true;
          })
          .catch((res) => {
            this.$message.error(res.msg);
          });
      },
      // 子组件点击了取消
      clearFrom() {
        this.formValidate = Object.assign({}, this.$options.data().formValidate);
      },
      // 子组件点击了确定
      changeMenu() {
        this.params.page = 1;
        this.params.name = '';
        this.getData();
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .vxeTable {
    > .vxe-table--header-wrapper {
      background: #fff !important;
    }
  
    .icon {
      font-size: 20px;
    }
  }
  ::v-deep .vxe-table--render-default .vxe-table--border-line {
    z-index: 2 !important;
  }
  .rule {
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;
    height: max-content;
    max-height: 600px;
    flex: 1;
  }
  .tree::-webkit-scrollbar {
    width: 2px;
    background-color: #f5f5f5;
  }
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  .rule::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #f5f5f5;
  }
  
  /*定义滚动条轨道 内阴影+圆角*/
  .rule::-webkit-scrollbar-track {
    border-radius: 4px;
    background-color: #f5f5f5;
  }
  
  /*定义滑块 内阴影+圆角*/
  .rule::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #ccc;
  }
  
  .rule-list {
    background-color: #f2f2f2;
    width: 48.5%;
    height: max-content;
    margin: 5px;
    border-radius: 3px;
    padding: 10px;
    color: #333;
    cursor: pointer;
    transition: all 0.1s;
  }
  
  .rule-list:hover {
    background-color: #badbfb;
  }
  
  .rule-list div {
    white-space: nowrap;
  }
  
  .select-rule {
    background-color: #badbfb;
  }
  .route-list {
    display: flex;
    margin-top: 10px;
  
    .tree {
      width: 200px;
      overflow-y: scroll;
      max-height: 600px;
      ::v-deep .el-tree-node__children .el-tree-node .el-tree-node__content {
        padding-left: 14px !important;
      }
    }
  }
  </style>
  